// 1.默认导入material风格的组件库
import 'package:flutter/material.dart';

class MyApp19 extends StatelessWidget {
  const MyApp19({super.key});

  List<Widget> getChildren() {
    return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((int value) {
      return Container(
        alignment: Alignment.center,
        color: Colors.teal,
        child: Text(
          '第$value个',
          style: const TextStyle(color: Colors.white, fontSize: 30),
        ),
      );
    }).toList();
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 3.创建一个MaterialApp组件（指定应用整体的UI风格：material风格）
    return Scaffold(
        // 1.1 导航
        appBar: AppBar(
          title: const Text('CustomScrollView组件'),
          backgroundColor: Colors.pink,
        ),
        // 1.2 主体内容
        body: CustomScrollView(
          slivers: [
            // 1.1 顶部导航
            SliverGrid.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  childAspectRatio: 1.5),
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.teal,
                  child: Text(
                    '第$index个',
                    style: const TextStyle(color: Colors.white, fontSize: 30),
                  ),
                );
              },
              itemCount: 6,
            ),
            // 列表
            SliverList.builder(
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    width: double.infinity,
                    height: 100,
                    margin: const EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.blue,
                    ),
                    child: Text(
                      '第$index个',
                      style: const TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  );
                },
                itemCount: 10)
          ],
        ));
  }
}
